<template>
  <div class="app-container">
    <div class="demo-input-suffix" align ="center">
  
  
    <el-date-picker
      v-model="value6"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['12:00:00']">
    </el-date-picker>

  <el-input
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    style="width:300px;margin-left:5px"
    v-model="input21">
  </el-input>



<el-button type="primary" icon="el-icon-search" circle></el-button>

 <el-checkbox v-model="checked" >加急</el-checkbox>

</div>
<br>



    <el-table :data="tableData" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
              highlight-current-row >
      <el-table-column align="center" prop="date" label="序号" >
      </el-table-column>
     
      <el-table-column align="center" prop="name" label="设备名称" >
      </el-table-column>
      <el-table-column align="center" prop="address" label="使用位置">
      </el-table-column>
      <el-table-column align="center" prop="address" label="设备ID">
      </el-table-column>
      <el-table-column align="center" prop="address" label="设备管理员">
      </el-table-column>
      <el-table-column align="center" prop="address" label="近几天可用时间">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
        <el-button type="success" size="small" @click="go()">申请</el-button>
      </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <span class="demonstration"></span>
        <el-pagination
       @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>  



  </div>
</template>
<script>
  export default {
    data() {
      return {

        checked: false,

        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,

         options: [{
          value: '选项1',
          label: '所有'
        }, {
          value: '选项2',
          label: '维护中'
        }, {
          value: '选项3',
          label: '使用中'
        }, {
          value: '选项4',
          label: '申请中'
        }],
        value: '',

         value6: '',
        value7: '',
           
           input2: '',
           input21: '',
           input22: '',
           input23: '',

          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
        listLoading: false,//数据加载等待动画
        dialogFormVisible: false,//增加按钮弹窗能不能看到
        adminName: '管理员' ,
        title: '提示框'
      }
    },
    created() {//钩子函数创建时调用
    },
    methods: {
      showCreate() {
        this.dialogFormVisible = true;//显示弹窗
      },      
      getIndex($index) {
        //表格序号
        return $index + 1
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleClick() {
        alert('button click');
    },
    go(){
  		this.$router.push('dev_apply')
  	}

    }
  }
</script>
<style scoped>
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .requiredPerm {
    color: #ff0e13;
  }
</style>
